<template>
	<view class="container">
		<view class="header" v-if="result.base_info">
			<view class="date">
				<view class="">
					{{result.base_info.gongli.substring(0, 4)}}年
				</view>
				<view class="">
					{{getContentBetween(result.base_info.gongli,'年','月')}}月
				</view>
				<view class="">
					{{getContentBetween(result.base_info.gongli,'月','日')}}日
				</view>
				<view class="">
					{{getContentBetween(result.base_info.gongli,'日','时')}}时{{getContentBetween(result.base_info.gongli,'时','分')}}分
				</view>
			</view>
			<view class="row">
				<view class="" :style={color:colors[result.bazi_info.bazi[0][0]]}>
					{{result.bazi_info.bazi[0][0]}}
				</view>
				<view class="" :style={color:colors[result.bazi_info.bazi[1][0]]}>
					{{result.bazi_info.bazi[1][0]}}
				</view>
				<view class="" :style={color:colors[result.bazi_info.bazi[2][0]]}>
					{{result.bazi_info.bazi[2][0]}}
				</view>
				<view class="" :style={color:colors[result.bazi_info.bazi[3][0]]}>
					{{result.bazi_info.bazi[3][0]}}
				</view>
			</view>
			<view class="row">
				<view class="" :style={color:colors[result.bazi_info.bazi[0][1]]}>
					{{result.bazi_info.bazi[0][1]}}
				</view>
				<view class="" :style={color:colors[result.bazi_info.bazi[1][1]]}>
					{{result.bazi_info.bazi[1][1]}}
				</view>
				<view class="" :style={color:colors[result.bazi_info.bazi[2][1]]}>
					{{result.bazi_info.bazi[2][1]}}
				</view>
				<view class="" :style={color:colors[result.bazi_info.bazi[3][1]]}>
					{{result.bazi_info.bazi[3][1]}}
				</view>
			</view>
		</view>
		<view class="des">
			<view class="title">
				生平事迹
			</view>
			<view class="content">
				{{result.deed}}
			</view>
		</view>
		<view class="detail">
			<view class="title">
				大运流年详细事迹
			</view>
			<view class="content">
				<view class="item" v-for="item in list">
					<view class="p-title">
						{{item.title}}
					</view>
					<view class="c-item" v-for="row in item.children">
						<view class="c-title">
							{{row.title}}
						</view>
						<view class="c-content">
							{{row.content}}
						</view>
						<view class="circle">
							
						</view>
						<view class="line">
							
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted,
		unref,
		toRaw,
		toRefs,
		nextTick
	} from 'vue'
	import {
		onInit,
		onLoad,
		onReady,
		onShow,
		onHide,
		onUnload,
		onResize,
		onNavigationBarButtonTap
	} from '@dcloudio/uni-app'
	import {
		$http,
		address,
		timestampToDateTime,
		textColors,
		initBaiduStatistics
	} from "@/common"
	const colors = ref(textColors)
	const result = ref({})
	onReady(() => {

	})
	const list = ref([])
	const arr = [
		{
			title:'起运前1472-1480',
			content:'',
			children:[
				{
					title:'1483癸卯流年',
					content:'十二岁时，王守仁正式就读书塾。',
				}
			]
		},
		{
			title:'壬子大运1481-1490',
			content:'',
			children:[
				{
					title:'1483癸卯流年',
					content:'十二岁时，王守仁正式就读书塾。',
				},
				{
					title:'1484甲辰流年',
					content:'十三岁，母亲郑氏去世，幼年失恃，这对他来说是一个很大的挫折。但他志存高远，心思不同常人。一次与书塾先生讨论何为天下最要紧之事，他就不同凡俗，认为“科举并非第一等要紧事”，天下最要紧的是读书做一个圣贤的人。当时国家朝政腐败，义军四起。英宗正统年间，英宗被蒙古瓦剌部所俘。这件事情在王守仁幼小的心中投下了巨大的阴影。他发誓一定要学好兵法，为国效忠。',
				}
			]
		}
	]
	const getContentBetween = (str, start, end) => {
		const regex = new RegExp(start + '(.*?)' + end, 's'); // 's' 允许 . 匹配换行符
		const match = str.match(regex);
		return match ? match[1] : ''; // 如果没有匹配返回空字符串
	}
	onLoad((options) => {
		$http.get('baziInfo',{qiPanId:options.qiPanId}).then(res=>{
			result.value = JSON.parse(res.result)
			result.value.deed = options.deed
			let a = document.getElementsByClassName("uni-page-head__title")[0]
			a.textContent = result.value.base_info.name
			document.title = "幸运指南"
		})
		console.log(result.value,'optionsx')
		$http.get('wikiDetail',{wikiId:options.id}).then(res=>{
			if(res){
				list.value = res
			}
		})
	})
	onShow(() => {
		
	})
	onMounted(() => {
		
	})
</script>

<style lang="scss" scoped>
	.container {
		min-height: 100vh;

		.header {
			padding: 20rpx 100rpx;

			.date {
				display: flex;
				justify-content: space-between;
				color: #C0C0C0;

				view {
					flex: 1;
					text-align: center;
				}
			}

			.row {
				display: flex;
				justify-content: space-between;
				margin: 20rpx 0;

				view {
					font-size: 44rpx;
					flex: 1;
					text-align: center;
				}
			}
		}
		.des {
			.title {
				background-color: #EDF8ED;
				padding: 20rpx;
				font-size: 32rpx;
				color: #42b983;
				font-weight: bold;
			}
			.content{
				padding: 20rpx;
			}
		}
		.detail {
			.title {
				background-color: #EDF8ED;
				padding: 20rpx;
				font-size: 32rpx;
				color: #42b983;
				font-weight: bold;
			}
			.content{
				padding: 20rpx;
				.item{
					margin-bottom: 30rpx;
					.p-title{
						display: inline-block;
						margin-bottom: 20rpx;
						border-bottom: 8rpx solid #EDF8ED;
						font-weight: bold;
					}
					.c-item{
						position: relative;
						padding-left: 30rpx;
						.circle{
							position: absolute;
							z-index: 99;
							top: 10rpx;
							left: -2rpx;
							width: 20rpx;
							height: 20rpx;
							background-color: #42b983;
							border-radius: 50%;
						}
						.line{
							position: absolute;
							width: 2rpx;
							height: 100%;
							top: 6rpx;
							left: 8rpx;
							background-color: rgba(204, 255, 204, 0.9);
						}
						.c-title{
							color: #C0C0C0;
						}
						.c-content{
							padding: 20rpx 0;
						}
					}
				}
			}
		}
	}
</style>